<template>
  <div class="m-count-line" :class="comClazz">
    <MCountLineItem
      v-for="(i, index) in props.color"
      :key="index"
      :round="props.round"
      :color="i"
      :width="getItemWidth(index)"
    >
    </MCountLineItem>
  </div>
</template>

<script lang="ts" setup>
import type { PropType } from "vue";
import MCountLineItem from "./MCountLineItem.vue";
import { ref, defineProps, computed } from "vue";

const props = defineProps({
  count: {
    type: Array as PropType<Array<number>>,
    default: () => [],
  },
  color: {
    type: Array,
    default: () => [],
  },
  round: {
    type: Boolean,
    default: false,
  },
  reverse: {
    type: Boolean,
    default: false,
  },
});

const total = computed(() => {
  if (props.count.length === 0) {
    return 0;
  }
  return props.count.reduce<number>((memo, cur) => {
    if (!cur) {
      memo += 0;
    } else {
      memo += Number(cur);
    }
    return memo;
  }, 0);
});
const getItemWidth = (index: number) => {
  const itemCount = props.count[index];
  if (!itemCount) {
    return "0";
  }
  return ((itemCount / total.value) * 100).toFixed(2) + "%";
};

const comClazz = computed(() => {
  return {
    "is-round": props.round,
    "is-reverse": props.reverse,
  };
});
</script>


<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "MCountLine",
});
</script>